<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试图片上传并回显</title>
    <link href="css/summernoteboostrap.css" rel="stylesheet">
    <link href="css/summernote.css" rel="stylesheet">
    <script src="js/summernote/jquery.js"></script>
    <script src="js/summernote/bootstrap.js"></script>
    <script src="js/summernote/summernote.js"></script>
    <script src="js/summernotePlugin.js"></script>
</head>

<body>

<textarea id="summernote" class="summernote"></textarea>
<script>

    //验证字符串的末尾是否与str相同
    String.prototype.endWith=function(str){
        var d=this.length-str.length;
        return(d>=0&&this.lastIndexOf(str)==d);
    }
    $('#summernote').summernote({
        callbacks: {
            onImageUpload: function(files) {
                // upload image to server and create imgNode...
                var formData=new FormData();
                formData.append('file',files[0]);
                var url=$.ajax({
                    url:"http://back.caidabao.website/upload/image",
                    type:"POST",
                    data:formData,
                    processData:false,
                    contentType:false,
                    async:false,
                    dataType:"text"
                }).responseText;

                //测试数据
                // url='https://upload.jianshu.io/users/upload_avatars/2857487/643cb249ce5b.jpg'

                //判断是否返回了正确的url
                if(url.endWith('.jpg')||url.endWith('.jpeg')||url.endWith('.png')||url.endWith('.gif')||url.endWith('.bmp')){
                    $('#summernote').summernote('insertImage', url);
                }else{
                    alert("图片上传失败！")
                }
            }
        }
    });


</script>
</body>
</html>
